<template>
  <div class="layout-aside">
    <el-scrollbar>
      <el-menu
          router
          mode="vertical"
          popper-effect="light"
          class="el-menu-vertical-demo"
          active-text-color="#ffd04b"
          :collapse="aside.isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          :default-active="defaultActive"
      >

<!--        <transition name="aside-logo"></transition>-->
        <!-- 侧边栏 logo -->
        <el-affix>
          <el-collapse-transition>
            <!-- 侧边栏logo,动画效果必须和菜单同步，否则会出现闪烁。参考 vue-pure-admin -->
            <div v-show="aside.showLogo">
              <!-- 关于 router-link 的使用，参考 https://router.vuejs.org/zh/guide/advanced/extending-router-link.html -->
              <router-link :to="'/'">
                <el-menu-item :index="0" style="height: 60px;">
                  <el-icon :size="30">
                    <svg-icon name="app-icon"></svg-icon>
                  </el-icon>
                  <template #title>
                    <span class="ml-4 text-2xl font-bold">龙茶清欢</span>
                  </template>
                </el-menu-item>
              </router-link>
            </div>
          </el-collapse-transition>
        </el-affix>


        <template v-for="(route, index) in routes" :key="index">
          <!-- 如果只有一个子路由 -->
          <el-menu-item v-if="route.children && route.children.length === 1 && route.redirect" :index="route.path">
            <el-icon>
              <component :is="route.meta?.icon"></component>
            </el-icon>
            <template #title>{{ route.meta?.title }}</template>
          </el-menu-item>

          <!-- 如果有两个及以上子路由 -->
          <el-sub-menu v-if="route.children && route.children.length >= 1 && !route.redirect" :index="route.path">
            <template #title>
              <el-icon>
                <component :is="route.meta?.icon"></component>
              </el-icon>
              <span>{{ route.meta?.title }}</span>
            </template>

            <!-- 遍历子路由，只能渲染二级路由，不支持三级 -->
            <el-menu-item v-for="(child, index) in route.children" :key="index" :index="child.path">
              <template #title>{{ child.meta?.title }}</template>
            </el-menu-item>
          </el-sub-menu>
        </template>

      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

const router = useRouter()
// 获取路由配置, 用于渲染侧边栏菜单
const routes = router.options.routes
console.log("routes", routes)

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { aside } = storeToRefs(layouts)

// 通过计算确定当前激活的路由
const defaultActive = computed(() => {
  const {fullPath} = router.currentRoute.value;
  return fullPath;
});
</script>

<style scoped lang="scss">
:deep(.el-menu) {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
  -webkit-box-shadow: rgba(142, 142, 142, 0.2) 0 6px 15px 0;
  color: rgb(128, 128, 128);
}

// 参考博客 https://gitcode.csdn.net/66ca0815aa1c2020b3599f60.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTUwOTM1LCJleHAiOjE3MjY3Mzk5NzQsImlhdCI6MTcyNjEzNTE3NCwidXNlcm5hbWUiOiJweXRob24xNTM5NyJ9.1WV6o8ViXkfz7jRgaszgY8T6QtPJiw-8y-nkFqzP99Q&spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-8-132274579-blog-140134108.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-8-132274579-blog-140134108.235%5Ev43%5Epc_blog_bottom_relevance_base2&utm_relevant_index=15
// 未折叠时的样式
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  //height: 100vh;
  animation: wipe-in-right 0.5s ease-in-out;
}
// 从左往右展开菜单
@keyframes wipe-in-right {
  from {
    width: 64px;
  }
  to {
    width: 250px;
  }
}
// 折叠时样式
.el-menu--collapse {
  width: 64px;
  //height: 100vh;
  animation: 0.5s cubic-bezier(.25, 1, .30, 1) wipe-out-left;
}
// 从右往左折叠菜单
@keyframes wipe-out-left {
  from {
    width: 250px;
    //clip-path: inset(0 250px 0 0);
  }
  to {
    width: 64px;
    //clip-path: inset(0 64px 0 0);
  }
}


// 滚动条样式清除
:deep(.el-scrollbar__bar) {
  display: none;
  background-color: #8ae619;//这里我设置成了透明色,可以根据需求添加自己想要的颜色
  //overflow: hidden;
}
</style>